<template>
<!-- 卡片容器 -->
  <el-card class="box-card">
    <!-- 顶部表单 -->
    <div slot="header" class="clearfix">
      <!-- 设置表单重置功能，注意：设置的ref要和form绑定的数据名一致 -->
      <el-form :inline="true" :model="condition" class="demo-form-inline" ref="condition">
        <!-- el-form-item设置prop绑定相应的参数名才能实现重置效果 -->
        <el-form-item label="资源名称" prop="name">
          <!-- 双向绑定数据，添加clearable属性表示可以快速清空 -->
          <el-input v-model="condition.name" placeholder="资源名称" clearable></el-input>
        </el-form-item>
        <!-- el-form-item设置prop绑定相应的参数名才能实现重置效果 -->
        <el-form-item label="资源路径" prop="url">
          <!-- 双向绑定数据 -->
          <el-input v-model="condition.url" placeholder="资源路径" clearable></el-input>
        </el-form-item>
        <!-- el-form-item设置prop绑定相应的参数名才能实现重置效果 -->
        <el-form-item label="资源分类" prop="categoryId">
          <!-- 双向绑定数据 -->
          <el-select v-model="condition.categoryId" placeholder="资源分类" clearable>
            <!-- 使用v-for遍历全部资源分类，形成下拉菜单 -->
            <el-option v-for="item in categoryIds" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset"  :disabled="loading">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-button @click="toAddResources">添加资源</el-button>
    <!-- 列表，设置数据对齐 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      v-loading="loading">
      <el-table-column
        type="index"
        label="编号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="资源名称">
      </el-table-column>
      <el-table-column
        prop="url"
        label="资源路径">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述">
      </el-table-column>
      <el-table-column
        label="添加时间">
        <!-- 添加时间插槽，使用过滤器处理时间 -->
        <template slot-scope="scope">
          <span>{{scope.row.updatedTime | time}}</span>
        </template>
      </el-table-column>
      <!-- 操作列，使用插槽创建两个按钮 -->
      <el-table-column
        label="操作">
        <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件,绑定数据 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="condition.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="condition.size"
      layout="total, sizes, prev, pager, next"
      :total="total"
      :disabled="loading">
    </el-pagination>
  </el-card>
</template>

<script>
import { getResourcePages, getAll } from '@/services/resources'
export default {
  data () {
    return {
      // 筛选条件，设置默认值
      condition: {
        // 这个页数在筛选的时候也会用到
        current: 1,
        size: 10
      },
      // 表单数据
      formInline: {
      },
      // 列表数据
      tableData: [],
      // 数据总条数
      total: 0,
      // 全部资源分类数据
      categoryIds: [],
      // 信号量：表示是否表格组件正在加载，上面的组件可以设置v-loading或者disabled绑定这个数据实现是否禁用和显示加载
      loading: false
    }
  },
  // 钩子函数
  created () {
    // 获取数据
    this.loadResourcePages({})
    // 调用函数获取全部资源分类
    this.getAllList()
  },
  methods: {
    toAddResources () {
      this.$router.push('/addResources')
    },
    // 重置按钮点击事件函数
    onReset () {
      // 重置表单
      this.$refs.condition.resetFields()
    },
    // 获取全部资源分类
    async getAllList () {
      // 获取数据
      const { data } = await getAll()
      // 判断数据是否正常
      if (data.code === '000000') {
        // 数据正常，将全部资源分类数据传入data
        this.categoryIds = data.data
      }
    },
    // 每页数据量发生变化事件函数
    handleSizeChange (val) {
      // value传递给data
      this.condition.size = val
      // 调用函数获取数据，直接传参condition
      this.loadResourcePages(this.condition)
    },
    // 页数发生变化函数
    handleCurrentChange (val) {
      // value传递给data
      this.condition.current = val
      // 调用函数获取数据，直接传参condition
      this.loadResourcePages(this.condition)
    },
    // 编辑按钮点击事件
    handleEdit () {
    },
    // 删除按钮点击事件
    handleDelete () {
    },
    // 查询按钮点击事件函数
    onSubmit () {
      // 复原页码为 1
      this.condition.current = 1
      // 调用获取数据
      this.loadResourcePages(this.condition)
    },
    // 获取数据
    async loadResourcePages (obj) {
      // 将信号量设置为true - 加载中
      this.loading = true
      const { data } = await getResourcePages(obj)
      // 判断数据是否正常获取
      if (data.code === '000000') {
        // 将获取的数据传给表格
        this.tableData = data.data.records
        // 把数据量传递给data
        this.total = data.data.total
        // 设置信号量为false - 非加载中
        this.loading = false
      }
    }
  },
  // 过滤器
  filters: {
    // 时间过滤器
    time (data) {
      // 将时间使用Date处理
      data = new Date(data)
      // 返回处理后的数据
      return `
        ${data.getFullYear()}/${data.getMonth()}/${data.getDay()}
        ${data.getHours()}:${data.getMinutes()}:${data.getSeconds()}`
    }
  }
}
</script>
